import React, { Component } from 'react';
import { connect } from 'react-redux'
import { Modal, Form, Input, Select, DatePicker, Table, Button, TreeSelect, Popconfirm, Row, Col,} from 'antd';
const { TextArea } = Input
var _this,_props,_state;

const Option=Select.Option;
const FormItem = Form.Item;
const TreeNode = TreeSelect.TreeNode;

class AddShelfDownModal extends Component {
  constructor(props) {
    super(props);
  }

  okHandler = () => {
     const { onOk } = this.props;
     this.props.form.validateFields((err, values) => {
      if (!err) {
        if(values.detailList.length!=0){
            onOk(values);
        }else{
          Modal.warning({
            title: '提示',
            content: '未添加资产信息',
          })
        }
      }
     });
  };

  deleteHandler = (id) => {
     const { removeDetailHandler } = this.props;
     removeDetailHandler(id);
  };



  render() {
    const { children, dispatch,assetType,assetList,detailList,id,roomList,assetBrandList,userList, } = this.props;
    const { getFieldDecorator} = this.props.form;
    const formItemLayout2 = {
      labelCol: { span: 5 },
      wrapperCol: { span: 18 },
    };
    const formItemLayout1 = {
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
    };
    const formItemLayout3 = {
      labelCol: { span: 9 },
      wrapperCol: { span: 15  },
    };
    const formItemLayout = {
      labelCol: { span: 10 },
      wrapperCol: { span: 14  },
    };
    const getRoom = data => data.map((item) => {
     return <Option key={item.id_+''}>{item.name}</Option>
    })

    const getUser = data => data.map((item) => {
     return <Option key={item.id_+''}>{item.name}</Option>
    })

    const onAddDetail = () => {
      this.props.form.validateFields((err, values) => {
        if (!err) {
            dispatch({
              type: 'shelfDown/queryAssetList',
              payload:values,
            })
         }
       });
     }
    const columns = [{
        fixed: 'left',
        title: '资产编号',
        dataIndex: 'assetNo',
        key: 'assetNo',
        width: 150
      },{
        title: '资产分类',
        dataIndex: 'typeName',
        key: 'typeName',
        width: 120
      },{
        title: '设备名称',
        dataIndex: 'assetName',
        key: 'assetName',
        width: 150
      },{
        title: '品牌',
        dataIndex: 'brandName',
        key: 'brandName',
        width: 100,
      },{
        title: '设备型号',
        dataIndex: 'modelName',
        key: 'modelName',
        width: 120,
      },{
        title: '设备序列号',
        dataIndex: 'serialNo',
        key: 'serialNo',
        width: 150,
      },{
        title: 'RFID编码',
        dataIndex: 'rfidNo',
        key: 'rfidNo',
        width: 100,
      },{
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        width: 80,
        render: (value, row, index) => {
           return (
                value==1?"已下架":value==2?"未下架":''
            )
        }
      },{
        title: '所在机房',
        dataIndex: 'roomName',
        key: 'roomName',
        width: 150,
      },{
        title: '所在机柜',
        dataIndex: 'rackName',
        key: 'rackName',
        width: 120,
      },{
        title: '起始U位',
        dataIndex: 'startU',
        key: 'startU',
        width: 80,
      },{
        title: '购置时间',
        dataIndex: 'buyTime',
        key: 'buyTime',
        width: 120,
      },{
        title: '维保结束日期',
        dataIndex: 'expirationTime',
        key: 'expirationTime',
        width: 120,
      }];

    return (
      <span>
        <Modal
                maskClosable= {this.props.maskClosable}
                confirmLoading= {this.props.confirmLoading}
                title={this.props.title}
                width={1000}
                zIndex={100}
                visible={this.props.visible}
                onOk={this.okHandler}
                onCancel={this.props.onCancel}
                key={this.props.newKey}
        >
         <div style={{backgroundColor:'#fff'}}>
            <div style={{}}>
            <div style={{width:'100%',backgroundColor:'#fff',paddingLeft:'20px'}}>
                <Form layout={'inline'} style={{marginTop: '-16px'}}>
                  <FormItem style={{marginBottom:'0px'}}>
                    {getFieldDecorator('detailList',{initialValue:detailList})(
                      <Input type="hidden"/>
                    )}
                  </FormItem>

                    <Row gutter={4}>
                      <Col span={5}>
                        <FormItem
                            label="单号"
                            hasFeedback
                            {...formItemLayout2}
                          >
                          {
                            getFieldDecorator('id_', {
                              initialValue: id,
                            })(<Input  readOnly="readOnly" style={{ width: '160px' }} />)
                          }
                        </FormItem>
                      </Col>
                      <Col span={6}>
                        <FormItem
                              label="机房"
                              hasFeedback
                              {...formItemLayout1}
                            >
                            {getFieldDecorator('roomId', {
                                rules: [{
                                  required: true, whitespace: true, message: '请选择所在机房',
                                }]
                           })(
                              <Select
                                  showSearch
                                  style={{ width: '180px' }}
                                  placeholder="选择机房"
                                  optionFilterProp="children"
                              >
                                  {getRoom(roomList)}
                              </Select>
                              )}
                        </FormItem>
                      </Col>
                      <Col span={5}>
                        <FormItem
                              label="操作人"
                              hasFeedback
                              {...formItemLayout3}
                            >
                            {getFieldDecorator('operatorBy', {
                                rules: [{
                                  required: true, whitespace: true, message: '请选择操作人',
                                }]
                           })(
                              <Select
                                  showSearch
                                  style={{ width: '140px' }}
                                  placeholder="选择操作人"
                                  optionFilterProp="children"
                              >
                                  {getUser(userList)}
                              </Select>
                              )}
                        </FormItem>
                      </Col>
                      <Col span={8}>
                         <FormItem
                              label="预计执行时间"
                              hasFeedback
                              {...formItemLayout}
                            >
                             {getFieldDecorator('executeTime', {
                                rules: [{
                                  required: true, type: 'object',whitespace: true, message: '请选择预计执行时间',
                                 }]
                               })(
                                <DatePicker format="YYYY-MM-DD HH:mm"  style={{ width: '178px' }}/>
                              )}


                        </FormItem>
                      </Col>
                    </Row>
                    <Row style={{marginTop:'20px'}}>
                      <Col span={24}>
                             <FormItem
                                label="备注"
                                hasFeedback
                              >
                              {
                                getFieldDecorator('remark', {
                                  rules: [{ max: 200, message: '备注信息 200 字符以内' },]
                                })(<Input key="i1" style={{ width: '890px' }} type="textarea" autosize={{ minRows: 3, maxRows: 3 }}/>)
                              }
                      </FormItem>
                      </Col>
                    </Row>
                   <Row style={{marginTop:'15px'}}>
                     <Col span={24}>
                     <hr style={{width:'926px',height:'0px',borderTop:'1px solid #e9e9e9',borderRight:'0px',borderBottom:'0px',borderLeft:'0px'}} />
                     </Col>
                   </Row>
                   <Row>
                      <Col span={24}>
                        <div style={{width:'100%',height:'100%',marginTop:'15px',marginBottom:'5px',textAlign:'right',paddingRight:'10px'}}>
                           <FormItem>
                              <Button type="primary" size='large' onClick={onAddDetail}>新增明细</Button>
                          </FormItem>
                        </div>
                      </Col>
                   </Row>

                    <div style={{}}>
                        <div style={{width:'100%',padding:"10px 20px 20px 0px",}}>
                              <Table columns={columns}
                                  rowKey={record => record.id_}
                                  dataSource={detailList}
                                  pagination={false}
                                  scroll={{ x: 1800 }}
                            />
                        </div>
                    </div>
                </Form>
            </div>

            </div>
        </div>
        </Modal>

      </span>
    );
  }

}

export default Form.create()(AddShelfDownModal)
